<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子跟随鼠标移动（直接跟随）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: #eb8a0c; 
            border :1px solid; 
            position: absolute; 
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        let box = document.querySelector('div');
        div.onmousemove=function(e){
            console.log(e);
            box.style.left =e.clientX-this.offsetWidth/2+'px';
            box.style.top = e.clientY-this.offsetHeight/2+'px';
            
        }



        // let boxWidth = box.offsetWidth; 
        // let boxHeight = box.offsetHeight; 

        // document.addEventListener('mousemove', (e) => {
        //     // 计算盒子位置：让鼠标在盒子中心（减去盒子宽高的一半）
        //     const left = e.pageX - boxWidth / 2;
        //     const top = e.pageY - boxHeight / 2;


        //     const maxLeft = window.innerWidth - boxWidth;
        //     const maxTop = window.innerHeight - boxHeight;
        //     box.style.left = Math.max(0, Math.min(left, maxLeft)) + 'px';
        //     box.style.top = Math.max(0, Math.min(top, maxTop)) + 'px';
        // });
    </script>
</body>
</html>